/*
 * 地址选择
 */
'use strict';
import React, { Component } from 'react';
import {
    View,
    Text,
    StyleSheet,
    Image,
    ListView,
    RefreshControl,
    ActivityIndicator,
    TouchableOpacity,
    Dimensions,
    Animated,
    TouchableHighlight,
    AsyncStorage,
    PixelRatio,
    Alert,
    ScrollView
} from 'react-native';


import Toast from 'antd-mobile/lib/toast';
import List from 'antd-mobile/lib/list';

import NavTitle from '../component/NavTitle';

import Carousel from 'antd-mobile/lib/carousel';

import Button from 'antd-mobile/lib/button';

const Item = List.Item;

import XFetch from '../XFetch';

import AddGoods from './AddGoods';
import ProductShops from './ProductShops';

import Communications from '../utils/Communications';

class GoodsDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            sliderImage:[],
            title:void 0,
            address:void 0,
            telphone:void 0,
            price:0,
            num:void 0,
            content:void 0,
            id:void 0,
            imgs:[],
            heights:[],
            shopId:void 0
        }

    }


    componentDidMount(){
        this._getGoodsDetail();
    }

    _getGoodsDetail(){
        XFetch(`http://www.weiweigo.com/app/goods.aspx?method=showDetail&id=${this.props.id}`,{
            method:'GET'
        }).then(data=>{
            this.setState({
                sliderImage:data.focusimg?[...JSON.parse(data.focusimg),...JSON.parse(data.focusimg)]:[],
                title:data.title,
                address:data.addressDetail,
                telphone:data.tel,
                price:data.price,
                num:data.number,
                content:data.summary,
                id:data.id,
                shopId:data.shopId,
                imgs:data.content_img?JSON.parse(data.content_img):[],
            },()=>{
                let _heights = [];
                let _i = 0;
                this.state.imgs.map(ele=>{
                    Image.getSize(`http://www.weiweigo.com${ele.src}`, (width, height) => {
                        _i++;
                        _heights.push(height/PixelRatio.get());
                        if(_i === this.state.imgs.length){
                            this.setState({
                                heights:_heights
                            })
                        }
                    });
                });
            })
        });
    }

    _renderImage(){
        return this.state.imgs.map((ele,index)=>{
            return (
                <Image resizeMode="stretch" key={`ttt${index}`} source={{uri:`http://www.weiweigo.com${ele.src}`}} style={[styles.infoImg,{
                    marginTop:10,height:this.state.heights.length>0?this.state.heights[index]:0
                }]}></Image>
            )
        })
    }

    _intoShop(){
        let _status = false;
        this.props.navigator.getCurrentRoutes().map(ele=>{
            if(ele.name === 'ProductShops'){
                _status = true;
            }
        })
        if(_status){
            this.props.navigator.pop();
        }else{
            this.props.navigator.push({
                name:'ProductShops',
                component:ProductShops,
                params:{
                    id:this.state.shopId
                }
            })
        }
    }


    render() {
        return (
            <View style={styles.container}>
                <NavTitle
                    title='商品详情'
                    headColor = '#fbdc3a'
                    leftButton = {true}
                    leftText = {'返回'}
                    leftImg={require('../imgs/left.png')}
                    leftHander = {()=>{
                        this.props.navigator.pop();
                    }}
                    rightButton={this.props.me}
                    rightText = {this.props.me?'修改':''}
                    rightHander={()=>{
                        this.props.navigator.push({
                            name:'AddGoods',
                            component:AddGoods,
                            params:{
                                id:this.state.id
                            }
                        })
                    }}
                />
                <ScrollView
                    showsVerticalScrollIndicator={false}
                >
                <View style={{height:300}}>
                    <Carousel
                        autoplay={true}
                        infinite
                        dots = {false}
                    >
                        {this.state.sliderImage.map((ii,index) => {
                            return (
                                <Image
                                    key={`sliderImg${index}`}
                                    source={{uri:`http://www.weiweigo.com${ii.src}`}}
                                    style={styles.sliderImage}
                                />
                            )
                        })}
                    </Carousel>
                </View>
                <View style={styles.content}>
                    <Text style={styles.title}>{this.state.title}</Text>
                    <View style={styles.subInfo}>
                        <View style={styles.price}>
                            <Text style={styles.priceDetail}>¥{this.state.price}</Text>
                        </View>
                        <View style={styles.number}>
                            <Button size="small" onClick={this._intoShop.bind(this)}>进入店铺</Button>
                        </View>
                    </View>
                    {/*
                    <View style={styles.footerInfo}>
                        <View style={styles.rowItem}>
                            <Image source={require('../imgs/p.png')} style={styles.icon}></Image>
                            <Text style={styles.address}>店铺地址:{this.state.address}</Text>
                        </View>
                        <View style={[styles.rowItem,styles.telTop]}>
                            <Image source={require('../imgs/tel.png')} style={[styles.icon,{width:14,height:17}]}></Image>
                            <Text style={styles.telphone}>联系电话:{this.state.telphone}</Text>
                        </View>
                    </View>
                    */}
                </View>
                    <View style={styles.detail}>
                        <Text style={styles.remark} numberOfLines = {2}>{this.state.content}</Text>
                    </View>
                    <View style={styles.imgShow}>
                        {
                            this.state.imgs?this._renderImage():null
                        }
                    </View>
                    </ScrollView>
                <TouchableOpacity style={styles.telphone2} onPress={()=>{
                    Communications.phoneCall(this.state.telphone,false)
                }}>
                    <Text style={styles.telnumber}>联</Text>
                    <Text style={styles.telnumber}>系</Text>
                    <Text style={styles.telnumber}>电</Text>
                    <Text style={styles.telnumber}>话</Text>
                </TouchableOpacity>
            </View>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#EEE',
        flex: 1,
        flexDirection:'column'
    },
    sliderImage:{
        width:Dimensions.get('window').width,
        height:300,
    },
    content:{
        flexDirection:'column',
        flex:1,
        backgroundColor:'#FFF',
        padding:10
    },
    title:{
        color:'#333',
        fontSize:20
    },
    subInfo:{
        flexDirection:'row',
        marginTop:5
    },
    number:{
        flex:1,
        justifyContent:'flex-end',
        alignItems:'flex-end'
    },
    num:{
        fontSize:13,
        color:'#888988'
    },
    detail:{
        marginTop:15,
        paddingLeft:15
    },
    remark:{
        fontSize:16,
        color:'#888988'
    },
    infoImg:{
        width:Dimensions.get('window').width,
        height:180
    },
    priceDetail:{
        color:"#E83828",
        fontSize:18
    },
    footerInfo:{
        flexDirection:'column',
        marginTop:5
    },
    rowItem:{
        flexDirection:'row',
        alignItems:'center'
    },
    icon:{
        width:14,
        height:17,
        marginRight:3
    },
    address:{
        color:'#888988'
    },
    telTop:{
        marginTop:3
    },
    telphone:{
        color:'#888988'
    },
    telphone2:{
        position:'absolute',
        backgroundColor:'#F00',
        right:15,
        bottom:50,
        padding:5
    },
    telnumber:{
        color:'#FFF',
        marginTop:3
    },
    imgShow:{
        marginTop:10,
        backgroundColor:'#FFF',
        paddingBottom:10
    }
});

export default GoodsDetail;